<template>
	<view class="list-one">
		<view class="list-item" v-for="(item,index) in tabList" :key="index">
			<view class="img">
				<img src="../../static/img/list-one-title.png" alt="">
			</view>
			<view class="item-text">
				<view class="title">{{item.requireName}}</view>
				<view class="text-sm">
					<img src="../../static/img/yusuan-one.png" alt="">
					预算：<span>{{item.budget}}</span>
				</view>
				<view class="text-sm">
					<img src="../../static/img/qiyw-one.png" alt="">
					企业：<span>{{item.requireSource}}</span>
				</view>
				<view class="tab-sm">
					<view class="tab-sm-item" v-if="item.techField">{{ item.techField }}</view>
					<view class="tab-sm-item" v-if="item.requireType">{{ item.requireType }}</view>
					<view class="tab-sm-item" v-if="item.cooperationType">{{ item.cooperationType }}</view>
				</view>
				<view class="withMe" @click="duijie(item)"><img src="../../static/img/withme.png" alt="">与我对接</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getRequirePage
	} from '@/common/api/index.js'
	export default {
		data() {
			return {
				tabList: [],
				current: 1,
				size: 10,
				hasMore: true,
			}
		},
		// onReachBottom() {

		// 		console.log('00')
		//     if (this.hasMore) {
		//       this.data();
		//     }
		//   },
		methods: {
			reachsBottom() {
				if (this.hasMore) {
					this.data();
				}
			},
			duijie(item) {
				try {
					var value = wx.getStorageSync('userinfo');
					console.log(value)
					if (!value) {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
					uni.navigateTo({
						url: `/pages/index/cooperate?id=${item.requireId}&name=${item.requireName}&type=技术需求`
					})
				} catch (e) {
					// 处理错误
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}

			},
			data() {

				getRequirePage({
					current: this.current,
					size: this.size
				}).then(res => {
					if (res.code == 200) {
						if (res.data.pages == this.current) {
							this.hasMore = false; // 数据已全部加载完毕
						}
						if (this.current == 1) {
							this.tabList = res.data.records
						} else {
							this.tabList = [...this.tabList, ...res.data.records];

						}
						this.current++;

					}
				})
			},
		},
		onLoad() {
			this.data()
		},
		mounted() {
			console.log('999')
			this.data()
		}
	}
</script>
<style scoped>
	.list-one {
		background-color: #F1F6FA;
		font-size: 24rpx;
		color: #666666
	}

	.list-item {
		position: relative;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.img {
		float: left;
		display: inline-block;
		margin-top: 5rpx;
		width: 10%;
		vertical-align: middle;

	}

	.img img {
		float: left;

		width: 40rpx;
		height: 40rpx;

	}

	.item-text {
		width: 90%;
		display: inline-block;
	}

	.title {
		width: 70%;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
	}

	.text-sm {
		margin-top: 20rpx;
		line-height: 30rpx;
	}

	.text-sm img {
		height: 30rpx;
		width: 30rpx;
		vertical-align: top;
		margin-right: 10rpx;
	}

	.text-sm>span {
		color: #999999
	}

	.tab-sm {
		margin-top: 20rpx;

	}

	.tab-sm-item {
		display: inline-block;
		padding: 10rpx;
		color: #666666;
		background-color: #F5F5F5;
		margin-right: 10rpx;
		margin-bottom: 6rpx;
	}

	.withMe {
		padding: 0 22rpx;
		position: absolute;
		background: linear-gradient(270deg, #1568ED 0%, #5DB5FF 100%);
		color: #ffffff;
		line-height: 55rpx;
		right: 20rpx;
		top: 21rpx;
		/* width: 120rpx; */
		border-radius: 30rpx;
	}

	.withMe img {
		width: 22rpx;
		height: 22rpx;
		/* vertical-align: text-top; */
		margin-right: 5rpx;
		margin-top: 3rpx;
	}
</style>